<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<view class="">
			<!-- 显示的吸顶导航 -->
			<!-- <sh-filter id="filter" v-show="!fixed" class="fixed" @change="onFilter"></sh-filter> -->
		</view>
		<!-- 空白页 -->
		 

		<!-- 分类选项卡 -->
		<view if="isConnected && isRefresh" class="content-box">
			<!-- <sh-search></sh-search> -->
			<view class="sh-userinfo-box">
				<view class="head-wrap">
					<!-- 		<view slot="right" class="u-flex u-row-center u-col-center u-m-r-20" v-if="false" @tap="goStore">
			 			<button class="u-reset-button merchant-btn">切换商家版</button>
			 		</view> -->
					<view class="user-head u-flex u-row-between">
						<view class="u-flex">
							<!-- 个人信息 -->
							<view class="info-box">
								<view class="u-flex" style="width:700rpx;justify-content: space-between;">
									<!-- 左侧图标名称 -->
									<view class="u-flex" style="">
										<view class="head-img-wrap">
											<image class="head-img" mode="aspectFill" :src="stroedata.logo"></image>
										</view>
										<view class="uni-flex uni-row">
											<text class="user-name u-ellipsis-1"
												style="text-align: center;">{{ stroedata.name}}</text>
												<view class="info">
													<text style="margin-right: 10rpx;">已售{{stroedata.sales}}件</text><i></i>
													<text style="margin-left: 10rpx;">{{stroedata.favorites}}人关注</text>
												</view>
										</view>
									</view>
									<!-- 最右侧按钮盒子 -->
									<view class="" style="margin-right: 50rpx;">
										<view class="text user-level" hover-class="devs" style="-webkit-flex: 1;flex: 1;"
											@tap="onFavorite(stroedata.id)">{{isStoreFavorite?"已关注":'+关注'}}
										</view>
										<view class="text user-level" hover-class="devs" style="-webkit-flex: 1;flex: 1;"
											@tap="gokefu(stroedata.id)">客服
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="u-flex">
			 				<button  @tap="onShare()" style="color: #fda22a;font-size: 36rpx;background-color: #fff;margin-right: 30rpx;height: 60rpx;line-height: 60rpx;text-align: center;"> 签到</button>
			 			</view> -->
					</view>
				</view>
			</view>
			<view v-if="reviews > 0" class="u-flex appraise" @tap="onJump">
				<view class="rig-box">
					评价
				</view>
				<view class="app-con">
					
					<view class="con-box">
						查看全部
					</view>
				</view>
			</view>
			<view class="">
				<view class="type-box">
					<view v-show="hastemplate" class="all" :class="{'border':!lookAll}" @click="onLookHome">
						首页
					</view>
					<view class="all" @click="onLookAll" :class="{'border':lookAll}">
						全部商品
					</view>
					<view class="type" @click="goType">
						分类
					</view>
				</view>
				<ljshop-filter id="filter" :class="{'fixed':fixed}" @change="onFilter"></ljshop-filter>
			</view>
		</view>
		<!-- 店铺装修 切换到全部商品隐藏 -->
		<view v-if="!lookAll" if="isConnected && isRefresh" class="content-box" >
			<view class="template-box">
				<sh-banner :list="storeAdImageList" v-show="storeAdImageList.length>0">
				</sh-banner>
			</view>
			<block v-for="item in storeproducttagList" v-show="storeproducttagList.length>0">
				<sh-hot-goods :detail="item" :rebate="rebate"></sh-hot-goods>
			</block>
		</view>
		
<!-- 		<view class="list-box" v-if="!hastemplate">
			<view class="head-box">
				<sh-filter @change="onFilter" v-if="false"></sh-filter>
			</view> -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="head_box">
      <u-search
          v-model="searchVal"
          margin="30rpx"
          placeholder="搜索商品"
          height="64"
          @search="onSearch"
          @custom="onSearch"
          @clear="clearSearch">
      </u-search>
    </view>
    <!-- #endif -->
		<!-- 全部商品 展示店铺装修时隐藏 切换到全部商品显示 -->
			<view v-if="lookAll" class="hot-goods u-m-b-10 u-p-x-16">
          <view class="u-waterfall" style="flex-wrap: wrap;">
            <view
                class="goods-item u-m-b-16 u-flex u-row-center u-col-center"
                :class="{'u-left':index % 2 !== 0}"
                v-for="leftGoods,index in goodsList" :key="index">
              <view v-if="leftGoods.hasVideo" class="video">
                <image src="https://image.hzwltb69.com/app/imgs/chat/live.gif" mode=""></image>
              </view>
              <ljshop-goods-card
                  :detail="leftGoods"
                  :type="leftGoods.activity_type"
                  :image="leftGoods.img"
                  :title="leftGoods.name" :subtitle="leftGoods.caption?leftGoods.caption:''" :price="leftGoods.price"
                  :originPrice="((leftGoods.price-leftGoods.cost)*rebate/100).toFixed(2)"
                  :sales="leftGoods.sales"
                  @click="onGoInfo(leftGoods.id)"
                  v-if="leftGoods.type!='EXCHANGE'">
              </ljshop-goods-card>
            </view>
          </view>
			
				<!--<button v-show="total > perPage" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center"
					@tap.stop="loadMore">
					<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999"
						:class="{ 'refresh-active': isRefresh }"></text>
					{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
			 </button> -->
			</view>
			<!-- 缺省页 -->
			<ljshop-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~">
			</ljshop-empty>
			<!-- 加载更多 -->
			<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGoodsCardExchange from './components/sh-goods-card-exchange.vue';
	import shSearch from './components/sh-search.vue';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters,
		 
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shSearch,
			shGoodsCardExchange
		},
		data() {
			return {
				options: [{
					icon: 'https://image.hzwltb69.com/app/imgs/score/stroe_index_select.png',
					text: '首页',
					storeId:uni.getStorageSync("detailStoreId")
				}, {
					icon: 'https://image.hzwltb69.com/app/imgs/score/store_cate.png',
					text: '分类',
					info: 2,
					storeId:uni.getStorageSync("detailStoreId")
				}, {
					icon: 'https://image.hzwltb69.com/app/imgs/score/store_product.png',
					text: '全部宝贝',
					info: 2,
					storeId:uni.getStorageSync("detailStoreId")
				},
				{
					icon: 'https://image.hzwltb69.com/app/images/detailserver.png',
					text: '客服',
					info: 2,
					storeId:uni.getStorageSync("detailStoreId")
				}],
				isRefresh: true,
				enable: true, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				stroedata: {},
				storeAdImageList: [],
				storenavigationList: [],
				storeproducttagList: [],
				isStoreFavorite: false,
				rebate:0,
				storeId:uni.getStorageSync("detailStoreId"),
				isEmpty:false,
				hastemplate:true,
				goodsList: [],
				searchVal: '',
				categoryId: 0,
				page: 1,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				order: '',
				hasMroe:false,
				fixed:false,
				reviews: 0,
				lookAll: false,
				isAdding:false,
        type: 0
				
			};
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
      if(!this.hasMroe) return
      this.page += 1;
      this.getGoodsList();
		},
		// 收藏
		onShow() {
			let that = this;
			// this.getStoreInfo()
				 this.init();
		},
		onHide() {

			this.enable = false;
		},
		onLoad(e) {
			uni.setStorageSync("detailStoreId",e.id)
			// #ifdef APP-PLUS
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		 
			if (uni.getStorageSync("detailStoreId")) {
				this.categoryId = uni.getStorageSync("detailStoreId")
			 	//this.getGoodsList();
			} else if (this.$Route.query.hasOwnProperty('keywords')) {
				this.keywords = this.$Route.query.keywords;
				this.searchVal = this.$Route.query.keywords;
				!this.$Route.query.keywords && this.getGoodsList();
			} else {
				// this.getGoodsList();
			}
		},
		onPageScroll(e){
			let that = this
			// 滚下
			if(e.scrollTop > 90 ){
				that.fixed = true
				uni.setNavigationBarTitle({
						title: '全部商品'
				})
			}else{
				// 滚上
				that.fixed = false
				uni.setNavigationBarTitle({
						title: this.stroedata.name,
				})
			}
		},
		methods: {
			// 查看首页
			onLookHome(){
				let that = this
				if(!that.lookAll) return
				that.lookAll = false
			},
			// 查看全部
			onLookAll(){
				let that = this
				if(that.lookAll) return
				that.lookAll = true
			},
			// 跳转分类
			goType(){
				this.$Router.push({path: '/pages/store/category/three-catgory',query:{ id : this.stroedata.id } })
			},
			// 跳转全部
			onJump(){
				this.$Router.push({path: '/pages/store/appraiseList/appraiseList', query:{ id : this.stroedata.id } })
			},
      onGoInfo(id) {
        this.$Router.push({ path: '/pages/goods/pointdetail', query: { id: id } })
      },
			// 跳转客服
			gokefu(e){
				this.$Router.push({ path: '/pages/kefu/minikefu', query: { id: e} })
			},
			// 筛选栏change事件
			onFilter(e){
				this.type = e
				this.clear()
			},
			clear() {
        this.goodsList = [];
        this.page = 1;
        this.loadStatus = 'loadmore';
        this.getGoodsList()
			},
      // 键盘搜索,输入搜索
      onSearch() {
        if(!this.searchVal) return
        this.clear();
      },
      // 清除搜索框
      clearSearch() {
        this.searchVal = '';
        this.clear();
      },
			onFavorite(Id) {
				if(uni.getStorageSync("UId")){
				let that = this;
				that.$http('store.addstorefavorite', {
					storeId: Id,
				}).then(res => {
					this.init();
				});
				}
				else{
				uni.showToast({
					title:"您尚未登录"
				})
				}
				
			},
			// 初始化
      init() {
        let that = this;
        this.getStoreInfo()
        that.page = 1
          that.$http(
              'store.getdetail', {
                storeId: uni.getStorageSync("detailStoreId")
              },
          ).then(res => {
            if (res.code == 1) {
              that.storeAdImageList = res.data.storeAdImageList;
              that.storeproducttagList = res.data.storeproducttagList;
              if (that.storeAdImageList.length == 0
                  && that.storeproducttagList.length == 0) {
                // 显示全部商品 没有店铺装修
                that.hastemplate = false
                that.lookAll = true
              }
              that.getGoodsList();
            }
          });
      },
      // 商品列表
      getGoodsList() {
        let that = this;
        this.isAdding = false
        that.loadStatus = 'loading';
        that.$http('store.produectlist', {
          storeId: this.storeId,
          current: that.page,
          pageSize:20,
          keyword: that.searchVal,
          orderBy: this.type
        }).then(res => {
            if (res.data.length >= 20) {
              if (that.page == 1) {
                this.hasMroe = true;
                that.goodsList = res.data;
              } else {
                that.goodsList = that.goodsList.concat(res.data)
              }
            } else {
              that.goodsList = that.goodsList.concat(res.data)
              this.hasMroe = false;
              this.loadStatus = "nomore"
            }
        });
      },
        getStoreInfo(){
    this.$http('store.getStroeInfo',
        {
          storeId: this.storeId
        }
    )
        .then(res=>{
          this.stroedata = res.data
        })
  },
		}
	};
</script>

<style lang="scss">
	// 更新信息
	.modal-box {
		width: 600rpx;

		.btn-hover {
			background-color: rgb(230, 230, 230);
		}

		.modal-head {
			padding-top: 48rpx;
			font-weight: 500;
			text-align: center;
			color: $u-main-color;
		}

		.modal-content {
			padding: 48rpx;
			font-size: 30rpx;
			text-align: center;
			color: $u-content-color;
		}

		.modal-bottom {
			.modal-btn {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				cursor: pointer;
				text-align: center;
				border-radius: 4rpx;
			}

			.cancel-btn {
				color: #666666;
			}

			.save-btn {
				color: #e9b461;
			}
		}
	}

	.sh-userinfo-box {
		position: relative;
		height: 180rpx;

		.head-wrap {
			width: 100%;
			height: 100%;
			background: #fff;

			.merchant-btn {
				width: 178rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #ffffff;
				border-radius: 32rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #a8700d;
			}
		}

		.user-head {
			width: 100%;
			padding-top: 30rpx;

			.info-box {
				padding-left: 30rpx;

				.head-img-wrap {
					position: relative;

					.refresh-btn {
						position: absolute;
						padding: 0;
						background: none;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #c9912c;
						top: -10rpx;
						right: 10rpx;
					}
				}

				.head-img {
					width: 108rpx;
					height: 108rpx;
					border-radius: 15rpx;
					background: #ccc;
					margin-right: 25rpx;
					overflow: hidden;
				}

				.user-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #000;
					line-height: 30rpx;
					width: 240rpx;
					text-align: center;
				}

				.user-level {
					font-size: 28rpx;
					font-weight: 500;
					// color: #fda22a;
					color: #f86522;
					line-height: 30rpx;
					padding: 10rpx;
					width: 130rpx;
					text-align: center;
					// margin-top: 15rpx;
					margin-bottom: 15rpx;
					background-color: #fff;
					border-radius: 15rpx;
					border: #f86522 1rpx solid;
				}
			}

			.tag-box {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 22rpx;
				margin-left: 10rpx;

				.tag-img {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					border-radius: 50%;
				}

				.tag-title {
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 40rpx;
					padding: 0 10rpx;
				}
			}

			.code-btn {
				padding: 30rpx;

				.icon-qrcode {
					font-size: 50rpx;
					color: #fff;
				}
			}
		}

		.wallet {
			font-size: 20rpx;
			padding-left: 140rpx;

			.money {
				margin-right: 40rpx;
			}
		}
	}

	// 绑定微信公众号
	.notice-box {
		width: 750rpx;
		height: 70rpx;
		background: rgba(253, 239, 216, 1);
		padding: 0 35rpx;

		.notice-detail {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(204, 149, 59, 1);
		}

		.bindPhone {
			width: 135rpx;
			line-height: 52rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border-radius: 26rpx;
			padding: 0;
			font-size: 26rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}
	.example-body {
		padding: 0;
		display: block;
	}
	
	.goods-carts {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}
	
	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
    justify-content: space-between;
	}
	
	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}
	
	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}
	.example-body {
		padding: 0;
		display: block;
	}
	
	.goods-carts {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
	}
	.info{
		font-size: 25rpx;
		color: #ababad;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		i{
			width: 1rpx;
			height: 20rpx;
			background-color: #ababad;
		}
	}
	.devs{
		transition: all .3s;
		color: #fff !important;
		background-color: #f86522 !important;
	}
	.fixed{
		z-index: 99999;
		position: fixed !important;
		top: 0 !important;
	}
	// 评论条
	.appraise{
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx 0 40rpx;
		background-color: #fff;
		.rig-box{
			color: #666666;
		}
		.app-con{
			font-size: 30rpx;
			margin-left: 30rpx;
			display: flex;
			.con-box{
				font-size: 27rpx;
				margin-right: 30rpx;
			}
		}
	}
	// 全部商品-分类 横幅
	.type-box{
		display: flex;
		height: 60rpx;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		.all{
			margin-left: 20rpx;
			// color: #f86522;
			height: 100%;
			margin-right: 20rpx;
		}
		.type{
			height: 100%;
			margin-left: 20rpx;
		}
	}
	.border{
		color:#f86522;
		border-bottom: 5rpx #f86522 solid;
	}
</style>
